<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="style/style.css" />
	<title>Persona WordPress Theme ~ Documentation</title>
	<script type="text/javascript" src="script/jquery.min.js"></script>
	<script type="text/javascript" src="script/jquery.tools.min.js"></script>
	
	<style type="text/css">
	#wrap{
		margin: 0 auto;
		width: 960px;
		padding: 20px 0 0 0;
	}

	p, ul li{
		font-family: Verdana;
		color: #6D6D6D;
		font-size: 12px;
		line-height: 20px;
	}

	#info{
		border-top: 1px solid #b7b7b7;
		border-bottom: 1px solid #d2d2d2;
		height: 43px;
		margin: 15px 0 20px -20px;
	}

	#info p{
		padding-left: 20px;
		font-style: italic;
		font-family: Georgia, Verdana;
		font-size: 13px;
	}

	#info p a, a{
		outline: none;
		color: #333;
		text-decoration: none;
	}

	ul#tabs{
		float: left;
		width: 200px;
		padding-right: 20px;
	}

	ul#tabs li, ul, ul#tabs li a{
		list-style: none;
		padding: 0;
		margin: 0;
		color: #606060;
		text-align: right;
	}

	ul#tabs li a:hover{
		color: #333;
	}

	ul#tabs li{
		margin-bottom: 10px;
	}

	ul#tabs li span{
		font-weight: 900;
		color: #333;
	}

	ul#tabs li a.current{
		color: #333;
	}

	.panes{
		border-left: 1px dotted #D2D2D2;
		width: 700px;
		float: left;
		min-height: 450px;
		padding-left:20px;
	}

	.panes h1{
		margin-top:0;
		font-family: Georgia;
		font-size: 20px;
		font-style: italic;
		font-weight: 900;
		margin-top: 0;
		color: #333;
	}

	.single ul li{
		text-align: left;
		padding-left: 60px;
		margin-bottom: 10px;
	}

	.single p{
		padding-left: 15px;
		line-height: 22px;
	}

	.single ul li span{
		color: #333;
		margin-right: 10px;
		font-weight: 900;
		margin: 0 26px 0 -40px;
	}

	.single ul li strong, .single strong{
		font-weight:900;
		color: #333;
	}

	h2{
		font-family: Georgia;
		font-size: 16px;
		font-style: italic;
		font-weight: 100;
		margin-top: 25px;
		margin-bottom:10px;
		color: #333;
	}

	code{
		padding-left: 15px;
		color: #6D6D6D;
		font-family: 'Lucida Console', monospace;
	}

	.panes .ima{
		border: 1px solid #DCDCDC;
		margin-left: 15px;
		width: 650px;
		text-align: center;
		padding-bottom:0;
	}
	
	.panes .ima img{
		display: block;
		margin: 0 auto;
	}

	</style>
	
</head>

<body>
	<script type="text/javascript">
		$(function() {
			$("ul#tabs").tabs("div.panes > div.single", {effect: 'fade', fadeOutSpeed: 50});
		});
	</script>

	<div id="wrap">
	
		<img src="images/logo.jpg" alt="" />
		<div id="info"><p>Persona Theme designed and coded by <a href="http://www.natko.com">Natko Hasić</a>, for all updates go to my <a href="http://themeforest.net/user/Natko">ThemeForest</a> profile and make sure you follow me <a href="http://twitter.com/NatkoHasic">@natkohasic</a></p></div>
		
		<ul id="tabs">
			<li><a href=""><span>I.</span> Installation</a></li>
			<li><a href=""><span>II.</span> Choosing Theme Appearance</a></li>
			<li><a href=""><span>III.</span> Publishing A Post</a></li>
			<li><a href=""><span>IV.</span> Unlimited Sidebars</a></li>
			<li><a href=""><span>V.</span> Widgets</a></li>
			<li><a href=""><span>VI.</span> Slider Manager</a></li>
			<li><a href=""><span>VII.</span> Custom Post/Page Background</a></li>
			<li><a href=""><span>VIII.</span> Creating a portfolio</a></li>
			<li><a href=""><span>IX.</span> Quick Status Feature</a></li>
			<li><a href=""><span>X.</span> Quick Image Tab2Tab Feature</a></li>
			<li><a href=""><span>XI.</span> Frontend Administration</a></li>
			<li><a href=""><span>XII.</span> Shortcodes</a></li>
			<li><a href=""><span>XIII.</span> Resources used</a></li>
			<li><a href=""></a></li>
		</ul>
		
		<div class="panes">

			<div class="single">
				<h1>I. Installation</h1>
				<p>Persona Theme installation is the same as any other WordPress theme installation. You can choose between these two ways:</p>
				<ul>
					<li><span>1.</span>Extract the persona.rar archive using WinRAR and upload the "persona" folder to "wp-content/themes". You can use FileZilla for that. 
					When the upload is finished go to your WordPress administration and under <strong>Appearance > Themes</strong> find the Persona theme and click <strong>activate.</strong></li>
					<li><span>2.</span>Extract the persona.rar archive using WinRAR and upload the "persona" folder to "wp-content/themes". You can use FileZilla for that. 
					When the upload is finished go to your WordPress administration and under <strong>Appearance > Themes</strong> find the Persona theme and click <strong>activate.</strong></li>
				</ul>
			</div>
			
			<div class="single">
				<h1>II. Choosing Theme Appearance</h1>
				<p>To set the theme style go to <strong>Appearance > Customize</strong> and click on the desired section. You can preview the changes live while changing the settings and then click the Save button when finished. Below is the list of all sections and a short description.</p>
				<div class="ima"><img src="images/customizer.png" alt="" /></div>
				<h2>Color Scheme</h2>
				<p>Here you can set the colors for all the post formats as well as the background color and general content style (light or dark). Menu color is also the main color and will be used for links in articles, comment reply button, etc.</p>
				<h2>Background Pattern</h2>
				<p>Choose between 35 different background patterns. Some are transparent so they will blend in with the currently selected background color, other are solid color. First pattern is "no pattern" option, use it if you want a solid color background. If you have a background image selected in the Background Image section it will override any pattern currently selected.</p>
				<h2>Layout</h2>
				<p>In this section you can choose if you wish to display the header, slider and sidebar. Also you can control the width of your blog by choosing big or compact size (recommended if you don't have a sidebar), sidebar position (left or right) and slider size.</p>
				<h2>Header Image</h2>
				<p>If you have "Show Header" option enabled in the previous section here you can set the background image. Upload a new image and save the changes, easy as that.</p>
				<h2>Background Image</h2>
				<p>Setting a background image will override any pattern or background color you picked previously. After uploading the image options for background repeat, position and attachment will appear.</p>
				<h2>Site Title & Logo</h2>
				<p>If you have header enabled here you can pick your logo (leave empty and admin avatar will be used). Site title and tagline can be set here as well.</p>
				<h2>Login Image</h2>
				<p>Custom login screen image, it is recommended you upload a picture 320 pixels in width and 65 pixels in height.</p>
				<h2>Navigation</h2>
				<p style="margin-bottom: 20px">Persona supports 2 menu positions: Header Menu and Footer Menu in the bottom right. To select a menu for one of this two positions you first need to create it in <strong>Appearance > Menus</strong>.</p>
			</div>

			<div class="single">
				<h1>III. Publishing A Post</h1>
				<p>Persona Theme supports <strong>7 Post Formats</strong> so you can choose if you want your post to be Status, Image, Gallery, Video, Quote, Link or just a Standard Post.</p>
				<div class="ima"><img src="images/post-formats.png" alt=""/></div>
				<p>This is how you should structure a post for a speficic post format:</p>
				<h2>Status Post Format</h2>
				<p>Use it for short updates like you would on Facebook or Twitter. No need for entering excerpt or providing a "more" tag, just select <strong>Status</strong> from the format metabox inside the post editor. If you want to post an update on the fly just press [N] on your keyboard (while on your website or in the admin panel) and Quick Status dialog will appear. You can read more about it in chapter IX.</p>
				<h2>Image Post Format</h2>
				<p>Publish only a single image with a title and optional short description. It's recommended to use <strong>Featured Image</strong> to add the image but you can also just add the image inside of your post (preferably on the top). Excerpt will be shown while viewing the image on the front page but the content will only be shown on the post single page. Don't forget to select <strong>Image</strong> from the format metabox inside the post editor.</p>
				<h2>Gallery Post Format</h2>
				<p>Use it for publishing multiple related images. When writing the post choose <strong>Add Media</strong> then <strong>Create Gallery</strong> and select the images you want. After that click <strong>Create a new gallery</strong> in the bottom right and again <strong>Insert Gallery</strong>. That's it, you can also change the order in wich the images appear by simply dragging & dropping before the <strong>Insert Gallery</strong> step. Don't forget to select <strong>Gallery</strong> from the format metabox inside the post editor.</p>
				<h2>Video Post Format</h2>
				<p>This post should contain just a single video. WordPress supports most of the big video services like YouTube, Vimeo, Hulu, DailyMotion and others, just copy the link and paste it in the post editor and it will automatically be embedded. Of course, before publishing select <strong>Video</strong> from the format metabox inside the post editor.</p>
				<h2>Quote Post Format</h2>
				<p>When sharing a quote from someone it's ideal to use Quote Post Format. Create a new post and insert the quote wrapped in &lt;blockquote&gt; tag, for example: <strong>&lt;blockquote&gt;"This is a super awesome quote, remember it."&lt;cite&gt;&lt;a href="http://www.example.com"&gt;Mark Twain&lt;/a&gt;&lt;/cite&gt;&lt;/blockquote&gt;</strong>. If you want to write your short description just use excerpt field. When finished select <strong>Quote</strong> from the format metabox inside the post editor and hit Publish.</p>
				<h2>Link Post Format</h2>
				<p>Found a cool link you would like to share on your blog? Just create a new post with the following content: <strong>&lt;a href="http://www.example.com"&gt;Name Of The Awesome Link&lt;/a&gt;</strong>, select <strong>Link</strong> from the format metabox inside the post editor and click Publish, easy as that.</p>
			</div>

			<div class="single">
				<h1>IV. Unlimited Sidebars</h1>
				<p>Persona Theme supports unlimited sidebars. This means you can have custom widgets displayed on a specific post or a page, but note that the "Main Sidebar" will appear on the home page and any other page that doesn't have a custom sidebar selected. For example, on your contact page you could display a widget containing a Google map or team info. To do so you first need to create a new sidebar by accessing <strong>Appearance > Sidebars</strong> (only displayed if "Show Sidebar" in <strong>Appearance > Customize</strong> is enabled), typing the sidebar name and clicking "Add Sidebar" button.</p>
				<div class="ima"><img src="images/unlimited-sidebars-01.png" alt=""/></div>
				<p>Once the sidebar is added you need to save the sidebars using the "Update Sidebars" button. If you want to delete or change the name of a specific sidebar just click on the sidebar name and the option screen will appear.</p>
				<div class="ima"><img src="images/unlimited-sidebars-02.png" alt=""/></div>
				<p>You can also change the order in which sidebars appear in <strong>Appearance > Widgets</strong> screen by selecting the move icons and draging. Finally, to choose where your new sidebar will be displayed simply enter the post or a page edit screen and choose your sidebar from the "Sidebar" metabox.</p>
				<div class="ima" style="margin-bottom: 20px"><img src="images/unlimited-sidebars-03.png" alt=""/></div>
			</div>
			
			<div class="single">
				<h1>V. Widgets</h1>
				<p>There are a couple of custom widgets that come with persona and you can view them by accessing the <strong>Appearance > Widgets</strong>. 
				To activate a widget just drag&drop it into a widgetized area. The widgets are:</p>
				<h2>1. Image Posts</h2>
				<p>This widget displays an image post format post. You can choose the post you want to display or just leave the latest one added showing.</p>
				<div class="ima"><img src="images/widget-01.png" alt="" /></div>
				<h2>2. Portfolio Items</h2>
				<p>This widget will display the item from your portfolio. You can choose the item you want to display or just leave the latest one added showing.</p>
				<div class="ima" style="margin-bottom: 20px"><img src="images/widget-01.png" alt=""/></div>
			</div>
			
			<div class="single">
				<h1>VI. Slider Manager</h1>
				<p>Persona Theme has a slider that shows on the front page (if you enabled "Show Slider" in Appearance > Customize). To edit the slides you need to access the Slider Manager by visiting <strong>Appearance > Manage Slides</strong> (only displayed if "Show Slider" in Appearance > Customize is enabled), typing the slide name and clicking "Add Slide" button.</p>
				<div class="ima"><img src="images/slider.png" alt="" /></div>
				<p style="margin-bottom: 20px">There are 4 fields for each slide: Slide title, Slide description, Slide image (click on the &bull;&bull;&bull; to bring up the upload screen) and Destination URL (where the user will be redirected when he clicks on the image). You can control the order by drag & dropping a slide using the drag icon on the far right. If you want to delete a specific slide click "Delete Slide" and then "Update Slider" button in the bottom right.</p>
			</div>
			
			<div class="single">
				<h1>VII. Custom Post/Page Background</h1>
				<p>Each post/page can have a custom background. When writing or editing the post/page you will see <strong>Background Image</strong> metabox on the right side.</p>
				<div class="ima"><img src="images/custom-background.png" alt="" /></div>
				<p>Click on "Select Background Image" to bring up the image selection screen. After choosing the image click the "Set as background" button in the right bottom corner. To remove it just click "Remove Background". Now just save or publish the post/page and you're done.</p>
			</div>
			
			<div class="single">
				<h1>VIII. Creating A Portfolio</h1>
				<p>Persona theme has a custom page template called "Portfolio" that you can use to create your own portfolio gallery. 
				First create a new page and select "Portfolio page" template under "Page Attributes". You are now ready to add portfolio items.</p>
				<p>On the left side of the WordPress administration there is a button "Portfolio" (just under "Comments" button) that is used to add portfolio items. This is pretty much the same procedure as when you add a new post. After you entered the name you must select the appropriate image. Click the "Set featured image" in bottom right corner and choose an image. Afterwards just click "Use as featured image".</p>
				<p>Each portfolio item needs a tag that will be displayed on the portfolio page. One item can contain more tags, for example "Photography" and "Architecture". This item will be visible when user selects "Photography" or "Architecture" from the portfolio page filter.</p>
				<div class="ima"><img src="images/portfolio.png" alt="" /></div>
				<p>Portfolio images are added just like you would add a new gallery to the post. Use the "more" tag if you want to fill the portfolio sidebar with some info about the project. See the screenshot above for reference.</p>
			</div>
			
			<div class="single">
				<h1>IX. Quick Status Feature</h1>
				<p>Quick Status enables you to publish a status from anywhere on your website, even from the admin area. Press [N] on your keyboard to call the Quick Status dialog, write your status and hit Publish. Name of the post will be "Status Update - date" but you can change it before publishing by selecting the text next to the Publish button.</p>
				<div class="ima"><img src="images/quick-status.png" alt="" /></div>
				<p style="margin-bottom: 20px">Status is published in AJAX so there's no refreshing the page, just continue browsing!</p>
			</div>

			<div class="single">
				<h1>X. Quick Image Feature</h1>
				<p>Quick Image enables you to drag an image from other tab (or even other browser window) and publish it in a second. Just drag the image from another tab to the tab with your website and drop it in the admin menu drop area.</p>
				<div class="ima"><img src="images/quick-image-drop.png" alt="" /></div>
				<p>When you drop it the Quick Image dialog will appear. Here you can change the post title, add excerpt and choose the category. Post is published in Image Post format.</p>
				<div class="ima" style = "margin-bottom: 20px"><img src="images/quick-image.png" alt="" /></div>
				<p style="margin-bottom: 20px">Image is published in AJAX so there's no refreshing the page, just continue browsing!</p>
			</div>
			
			<div class="single">
				<h1>XI. Frontend Administration</h1>
				<p>Persona enables you to change post titles, trash posts and change background pattern from the frontend. When logged in you will see the admin icon below the post format icon. Click it and a contextual menu will appear.</p>
				<div class="ima"><img src="images/frontend.png" alt="" /></div>
				<p>When done editing click the checkmark and the post will be updated. If you want to undo trashing a post click the admin icon again and select "Untrash Post".</p>
				<div class="ima"><img src="images/background-pattern.png" alt="" /></div>
				<p>Admin Toolbar contains an extra icon in the far right corner that holds another frontend edit feature - background patterns. Click on the pattern you wish to preview and select "Save Changes" if you wish to update the pattern.</p>
			</div>
			

			<div class="single">
				<h1>III. Shortcodes</h1>
				<p>Shortcodes are short bits of code that substitute long HTML code. These are the shortcodes you can use with Persona theme:</p>
				<h2>1. Two columns</h2>
				<p>This shortcode allows you to display text in two columns. 
				When writing a post open the <strong>[two_col]</strong> tag and after writing the left column close it with <strong>[/two_col]</strong>.
				To make the right column open <strong>[two_col_last]</strong> tag, write the text and then close it with <strong>[/two_col_last]</strong></p>
				<h2>2. Three columns</h2>
				<p>This shortcode allows you to display text in three columns.
				When writing a post open the <strong>[three_col]</strong> tag and after writing the left column close it with <strong>[/three_col]</strong>.
				To make the center column open <strong>[three_col]</strong> tag again, write the text and then close it with <strong>[/three_col]</strong>.
				To make the right column open <strong>[three_col_last]</strong> tag, write the text and then close it with <strong>[/three_col_last]</strong></p>
				<h2>3. Yellow box</h2>
				<p>This shortcode allows you to write a certain message in a yellow box (usually used for "note").
				To start it open <strong>[yellow_box]</strong> tag, write your text and then close it with <strong>[/yellow_box]</strong></p>
				<h2>4. Blue box</h2>
				<p>This shortcode allows you to write a certain message in a blue box (usually used for "info").
				To start it open <strong>[blue_box]</strong> tag, write your text and then close it with <strong>[/blue_box]</strong></p>
				<h2>5. Red box</h2>
				<p>This shortcode allows you to write a certain message in a red box (usually used for "warning" or "error").
				To start it open <strong>[red_box]</strong> tag, write your text and then close it with <strong>[/red_box]</strong></p>
				<h2>6. Green box</h2>
				<p>This shortcode allows you to write a certain message in a green box.
				To start it open <strong>[green_box]</strong> tag, write your text and then close it with <strong>[/green_box]</strong></p>
				<h2>7. Gray box</h2>
				<p>This shortcode allows you to write a certain message in a gray box.
				To start it open <strong>[gray_box]</strong> tag, write your text and then close it with <strong>[/gray_box]</strong></p>
				<h2>8. Splitter</h2>
				<p>This shortcode creates a splitter that can be inserted into text. To insert it enter <strong>[splitter][/splitter]</strong> and that's it, nothing between the tags.</p>
			</div>
			
			<div class="single">
				<h1>XI. Resources Used</h1>
				<h2>Icons</h2>
				<ul>
					<li><a href = "http://www.natko.com/wordpress-post-format-icons-retina/">Post Format Icons</a></li>
				</ul>

				<h2>Patterns</h2>
				<ul>
					<li><a href = "http://subtlepatterns.com/">Subtle Patterns</a></li>
					<li><a href = "http://speckyboy.com/2010/04/08/6-free-vector-seamless-backgrounds-source-files/">6 Free Vector Seamless Backgrounds</a></li>
					<li><a href = "http://agf81.deviantart.com/art/Brick-Texture-32-245485337">Brick texture by AGF81</a></li>
				</ul>
				<h2>Recommended Plugins</h2>
				<ul>
					<li><a href = "http://wordpress.org/extend/plugins/wordpress-seo/">WordPress SEO by Yoast</a></li>
					<li><a href = "http://wordpress.org/extend/plugins/contact-form-7/">Contact Form 7</a></li>
				</ul>
			
		</div>
	
	</div>
</body>
</html>